.main-container {
  @apply w-full max-h-full flex flex-col justify-between;
  & .main-content {
    @apply flex-1 overflow-auto;
  }
}

.sidebar-header {
  @apply bg-[var(--secondary)] w-full relative;
}

.game-list {
  @apply flex flex-col gap-1 list-none;
  & .game-item {
    @apply flex items-center gap-2 text-lg bg-[var(--muted)] p-1 rounded-sm cursor-pointer transition-colors duration-200;
    & .game-icon {
      @apply rounded-md;
    }
    &:hover {
      @apply bg-[var(--secondary)];
    }
    &.active {
      @apply bg-[var(--accent)];
    }
  }

  & .game-item-skeleton {
    @apply h-[50px] w-full rounded-lg bg-[var(--secondary)];
  }
}

.app-footer {
  @apply h-20;
}